<!-- STEP 0 - Language Selection -->
<input type="hidden" id="language" name="language" data-value="selectedLang"/>

<!-- Wizard -->
<div id="wizard" class="wizard" data-title="ESLIP Setup">

	<!-- STEP 1 - Create User Admin -->
    <div id="step-1" class="wizard-card" data-template-bind='[{"attribute": "data-cardname", "value": "labels.createAdminUser"}]'>

        <h3 class="stepTitle" data-content="labels.createAdminUser"></h3>
        
        <form id="form1" class="form-horizontal" role="form">
        
		    <div class="form-group">
		        <label for="adminUser" class="col-sm-4 control-label"><span data-content="labels.adminUser"></span>:</label>
		        <div class="col-sm-8">
		            <input type="text" class="form-control" id="adminUser" name="adminUser" data-value="settings.adminUser">
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="adminPass" class="col-sm-4 control-label"><span data-content="labels.adminPass"></span>:</label>
		        <div class="col-sm-8">
		            <input type="password" class="form-control" id="adminPass" name="adminPass" value="" />
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="adminPassConfirm" class="col-sm-4 control-label"><span data-content="labels.adminPassConfirm"></span>:</label>
		        <div class="col-sm-8">
		            <input type="password" class="form-control" id="adminPassConfirm" name="adminPassConfirm" value="" />
		        </div>
		    </div>

		</form>

    </div>

    <!-- STEP 2 - General Settings -->
    <div id="step-2" class="wizard-card" data-template-bind='[{"attribute": "data-cardname", "value": "labels.generalConfigs"}]'>

        <h3 class="stepTitle" data-content="labels.generalConfigs"></h3>
        
        <form id="form2" class="form-horizontal" role="form">
    	
    		<input type="hidden" id="language" name="language" data-value="selectedLang" />

		    <div class="form-group">
		        <label for="siteUrl" class="col-sm-4 control-label"><span data-content="labels.siteUrl"></span>:</label>
		        <div class="col-sm-8">
		            <input type="text" class="form-control" id="siteUrl" name="siteUrl" data-value="settings.siteUrl" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpSiteUrl"},{"attribute": "data-title", "value": "labels.siteUrl"} ]' data-toggle="popover" data-container="body" data-placement="right">
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="callbackUrl" class="col-sm-4 control-label"><span data-content="labels.callbackUrl"></span>:</label>
		        <div class="col-sm-8">
		            <input type="text" class="form-control" id="callbackUrl" name="callbackUrl" data-value="settings.callbackUrl" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpCallbackUrl"},{"attribute": "data-title", "value": "labels.callbackUrl"} ]' data-toggle="popover" data-container="body" data-placement="right">
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="pluginUrl" class="col-sm-4 control-label"><span data-content="labels.pluginUrl"></span>:</label>
		        <div class="col-sm-8">
		            <input type="text" class="form-control" id="pluginUrl" name="pluginUrl" data-value="settings.pluginUrl" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpPluginUrl"},{"attribute": "data-title", "value": "labels.pluginUrl"} ]' data-toggle="popover" data-container="body" data-placement="right">
		        </div>
		    </div>

		</form>
    </div>

    <!-- STEP 3 - Identity Providers -->
	<div id="step-3" class="wizard-card" data-template-bind='[{"attribute": "data-cardname", "value": "labels.idProviders"}]'>
	
		<h3 class="stepTitle" data-content="labels.idProviders"></h3>
		
		<form id="form3" class="form-horizontal" role="form">
			<div id="idProvidersContainer"></div>
		</form>

	</div>

	<!-- STEP 4 - Login Widget -->
	<div id="step-4" class="wizard-card" data-template-bind='[{"attribute": "data-cardname", "value": "labels.loginWidget"}]'>
	
		<h3 class="stepTitle" data-content="labels.loginWidget"></h3>
		
		<form id="form4" class="form-horizontal" style="width:487px;" role="form">
			
		    <div class="form-group">
		        <label for="widgetWidth" class="col-sm-4 control-label"><span data-content="labels.widgetWidth"></span>:</label>
		        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetWidth"},{"attribute": "data-title", "value": "labels.widgetWidth"} ]' data-toggle="popover" data-container="body" data-placement="right">
		            <div class="col-sm-7">
		                <input type="text" class="form-control" id="widgetWidth" name="widgetWidth" data-value="loginWidget.widgetWidth">
		            </div>
		            <div class="pull-left">
		                <select class="form-control" id="widgetWidthUnit" name="widgetWidthUnit">
		                    <option value="px">px</option>
		                    <option value="%">%</option>
		                </select>
		            </div>
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="widgetRows" class="col-sm-4 control-label"><span data-content="labels.widgetRows"></span>:</label>
		        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetRows"},{"attribute": "data-title", "value": "labels.widgetRows"} ]' data-toggle="popover" data-container="body" data-placement="right">
		            <div class="col-sm-7 spinner_wraper">
		                <div class="spinner input-group">
		                    <input type="text" class="form-control" id="widgetRows" name="widgetRows" data-value="loginWidget.widgetRows">
		                    <span class="spinnerUp input-group-addon glyphicon glyphicon-chevron-up"></span>
		                    <span class="spinnerDown input-group-addon glyphicon glyphicon-chevron-down"></span>
		                </div>
		            </div>
		            <div class="col-sm-5">
		                <div class="checkbox">
		                    <label>
		                        <input type="checkbox" id="autoRows"> Auto
		                    </label>
		                </div>
		            </div>
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="widgetColumns" class="col-sm-4 control-label"><span data-content="labels.widgetColumns"></span>:</label>
		        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetColumns"},{"attribute": "data-title", "value": "labels.widgetColumns"} ]' data-toggle="popover" data-container="body" data-placement="right">
		            <div class="col-sm-7">
		                <div class="spinner input-group" >
		                    <input type="text" class="form-control" id="widgetColumns" name="widgetColumns" data-value="loginWidget.widgetColumns">
		                    <span class="spinnerUp input-group-addon glyphicon glyphicon-chevron-up"></span>
		                    <span class="spinnerDown input-group-addon glyphicon glyphicon-chevron-down"></span>
		                </div>
		            </div>
		        </div>
		    </div>

		    <div class="form-group">
		        <label for="buttonLabel" class="col-sm-4 control-label"><span data-content="labels.buttonLabel"></span>:</label>
		        <div class="col-sm-8" data-template-bind='[{"attribute": "data-content", "value": "labels.HelpWidgetButtonLabel"},{"attribute": "data-title", "value": "labels.buttonLabel"} ]' data-toggle="popover" data-container="body" data-placement="right">
		            <div class="col-sm-7">
		                <label class="radio-inline">
		                    <input type="radio" name="buttonLabel" value="1"> <span data-content="labels.yes"></span>
		                </label>
		                <label class="radio-inline">
		                    <input type="radio" name="buttonLabel" value="0"> <span data-content="labels.no"></span>
		                </label>
		            </div>
		        </div>
		    </div>

		</form>

		<div class="row">
		    <div class="col-lg-12">
		        <div id="ESLIP_Plugin"></div>
		    </div>
		</div>

	</div>

</div><!-- End Wizard Content -->